<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<title></title>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css"  media="all">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" href="/groupbuying/css/index.css"/>
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
<style>
.ptuserlist{width: auto!important;/*display: flex;justify-content: center;*/}
.join-btn{position: fixed;width: 94%;bottom: 0;height: 40px;background-color: #CE3B41;text-align: center;line-height: 40px;left: 3%;border-radius: 10px;color: #fff;}
</style>
</head>
<body style="background-color: #f2f2f2;">
<nav class="navbar index-nav">
    <div class="loca ng-scope title-order" style="background: #f9fafd;">
        <a class="title-top" href="javascript:window.history.back();"></a>
        <a class="title-center">我的拼团</a>
        <a class="title-right" href="/index"></a>
    </div>
</nav>
<div id="user-b">
    <div class="groupsdetails-box">
        <div class="win-groups">
            <div class="win-icon">开团成功</div>
            <p id="tips" style="display: none;">快去邀请好友开参团吧</p>
        </div>
        <div class="groups-m">
            <!-- 商品详情 -->
            <div class="mc-sum-box"></div>
        </div>
        <div class="groups-avata">
            <div class="groups-avata-img">
                  <ul class="colonel ptuserlist"></ul>
            </div>
            <div class="isptend"></div>
            <div class="man-name">
                <ul id="ptuserlist"></ul>
            </div>
        </div>
        <div class="groups-m groups-m-s">
            <!--拼团玩法-->
            <div class="step">
                <div class="step_hd">
                    拼团玩法<!--<a class="step_more" href="tuan_rule.html">查看详情</a>-->
                </div>
                <div id="footItem" class="step_list">
                    <div class="step_item ">
                        <div class="step_num">1</div>
                        <div class="step_detail"><p class="step_tit">选择<br>心仪商品</p></div>
                    </div>
                    <div class="step_item ">
                        <div class="step_num">2</div>
                        <div class="step_detail"><p class="step_tit">支付开团<br>或参团</p></div>
                    </div>
                    <div class="step_item step_item_on">
                        <div class="step_num">3</div>
                        <div class="step_detail">
                            <p class="step_tit">等待好友<br>参团支付</p>
                        </div>
                    </div>
                    <div class="step_item">
                        <div class="step_num">4</div>
                        <div class="step_detail"><p class="step_tit">达到人数<br>团购成功</p></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="invite-btn" style="display: none;">还差<span id="personNum"></span>人组团成功</div>
        <div class="join-btn" style="display: none;">立即参团</div>
    </div>
</div>
</body>
<script type="text/javascript">
$.ajaxSetup({contentType: "application/json; charset=utf-8"});
var userInfo = $.parseJSON(sessionStorage.getItem("userInfo")),enumsData=[],interval;
var isOver = false;
layui.use(['layer','form','element','util'], function(){
    // layui.util.fixbar({
    //     top:true,css: { right: 15, bottom: 105 },showHeight:100,
    //     click: function (type) {if (type === 'top') $('.layui-fluid').animate({scrollTop: 0}, 200);}
    // });
    var loading = layer.load(0, {shade: 0.1});
    if(isEmpty(userInfo)){
        $.post("/cateringUser/selectOne",JSON.stringify({opendId:getQueryString("opendId")}), function (res) {
            if(res.data != null){
                userInfo = res.data;
                sessionStorage.setItem("opendId", getQueryString("opendId"));
                sessionStorage.setItem("userInfo", JSON.stringify(res.data));
            }else{
                window.location.href=getHttp()+"/wxpay/catering.html"
            }
        })
    }
    $.post("/cateringGroupBuying/select",JSON.stringify({sysId:getQueryString("sysId"),orderByAscType:"status"}), function (res) {
        layer.closeAll()
        $(".am-slides").empty()
        for(var i in res.data){
            if(res.data[i].status == 1) $("#tips").show()
            else if(res.data[i].status == 2) $(".win-icon").html("完成开团")
            else if(res.data[i].status == 3) $(".win-icon").html("开团失败")
            $("#personNum").html(res.data[i].groupSize - res.data[i].currentSize)
            if(res.data[i].groupSize - res.data[i].currentSize == 0){
                isOver = true;
                $(".isptend").append(
                    '<p class="man-number">恭喜您<span>已成团</span>，享受拼团优惠！</p>' +
                    '<div class="count_down2">商品制作配送中，请耐心等待哟~</div>'
                )
            }else{
                $(".isptend").append(
                    '<p class="man-number">还差<span>'+(res.data[i].groupSize - res.data[i].currentSize)+'</span>人，满'+res.data[i].groupSize+'人才能享受拼团优惠呦~</p>' +
                    '<div class="count_down2"></div>'
                )
                // 设置目标日期和时间
                startCountdown(new Date(res.data[i].expireTime.replaceAll("-","/")).getTime());
                interval = setInterval(function(){ startCountdown(new Date(res.data[i].expireTime.replaceAll("-","/")).getTime()); }, 1000);
            }
            if(res.data[i].userId != userInfo.userId){
                if(!isOver){
                    $(".join-btn").show().click(function(){
                        $.post("/cateringGroupOrders/select",JSON.stringify({groupBuyingId:getQueryString("sysId"),userId:userInfo.userId}), function (ress) {
                            if(ress.data.length == 0) window.location.href = "/grouppay?actiId=" + res.data[i].activityId + "&groupBuyingId=" + getQueryString("sysId")
                            else layer.msg("已参团，请勿重复参团！",{icon:0,time:2000})
                        })
                    })
                }else {
                    $(".join-btn").hide()
                }
            }else{
                if(!isOver){
                    $(".invite-btn").show().click(function(event){
                        event.preventDefault();
                        event.stopPropagation()
                        copyToClipboard(getHttp()+"/wxpay/catering.html?groupBuyingId="+getQueryString("sysId"))
                    })
                }else{
                    $(".invite-btn").hide()
                }
            }

            if(res.data[i].status > 0){
                $(".ptuserlist").append('<li><img src="/front-index/picture/touxiang.png"></li>')
                $("#ptuserlist").append('<li class="colonel"><div class="man-name-img fl"><img src="/front-index/picture/touxiang.png"></div>团长<span>'+res.data[i].createTime+'</span></li>')
            }
            for(var j in res.data[i].invitations){
                $(".ptuserlist").append('<li><img src="/front-index/picture/touxiang.png"></li>')
                $("#ptuserlist").append('<li class="colonel"><div class="man-name-img fl"><img src="/front-index/picture/touxiang.png"></div>好友<span>'+res.data[i].invitations[j].createTime+'</span></li>')
            }
            for(var k = 0; k< (res.data[i].groupSize - res.data[i].currentSize); k++){
                $(".ptuserlist").append('<li><img src="/groupbuying/images/tx2.jpg"></li>')
                $("#ptuserlist").append('<li><div class="man-name-img fl"><img src="/groupbuying/images/tx2.jpg"></div>座位没主人，快去邀请好友占领吧</li>')
            }
            $(".mc-sum-box").append(
                '<div class="myorder-sum fl"><img src="'+res.data[i].goodsImg+'"></div>' +
                '<div class="myorder-text">' +
                '<h1>'+res.data[i].actiName+' </h1>' +
                '<h2 style="color: black">'+res.data[i].groupSize+'人团：<span class="mc-t">￥<b>'+res.data[i].actiPrice+'</b>/份</span></h2>' +
                '</div>'
            )
        }
    })
})

// 指定时间与当前时间倒计时
function startCountdown(targetDate) {
    var currentDate = new Date().getTime();
    var distance = targetDate - currentDate;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if (distance < 0) {
        clearInterval(interval);
        isOver = true
        $(".count_down2").html('<span style="width: auto;padding: 2px 20px;">拼团已结束</span>')
        $.post("/cateringGroupBuying/update",JSON.stringify({sysId:getQueryString("sysId"),status:3}))
        $.post("/cateringGroupBuying/update",JSON.stringify({sysId:getQueryString("sysId"),status:3}))

    } else{
        if(days > 0){
            $(".count_down2").html('剩余<span>'+days+'</span>天<span>'+addZero(1,2,hours)+'</span>:<span>'+addZero(1,2,minutes)+'</span>:<span>'+addZero(1,2,seconds)+'</span>结束')
        }else{
            $(".count_down2").html('剩余<span>'+addZero(1,2,hours)+'</span>:<span>'+addZero(1,2,minutes)+'</span>:<span>'+addZero(1,2,seconds)+'</span>结束')
        }
    }
}
function copyToClipboard(textToCopy) {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        navigator.clipboard.writeText(textToCopy).then(function() {
            layer.msg('链接复制成功，快分享给好友吧',{icon:1,time:1000});
        }).catch(function(err) {console.error('复制文本失败', err);});
    } else {
        // document.execCommand('copy') 向剪贴板写文本
        let input = document.createElement('input')
        input.style.position = 'fixed'
        input.style.top = '-10000px'
        input.style.zIndex = '-999'
        document.body.appendChild(input)
        input.value = textToCopy
        input.focus()
        input.select()
        try {
            let result = document.execCommand('copy')
            document.body.removeChild(input)
            if (!result || result === 'unsuccessful') {
                console.log('复制失败')
            } else {
                layer.msg('地址复制成功',{icon:1,time:1000});
            }
        } catch (e) {
            document.body.removeChild(input)
            alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
        }
    }
}
</script>
</html>